<template>
	<view class="">
		<!-- bannar -->
		<view class="allbanner" style="position: relative;">
			<view class="bannercenter flexcolumn">
				<view class="bannerimgtext">
					<image src="@/static/image/system/f7xn.png" mode="" class=""></image>
				</view>
				<view class="bannertext3 margin_top">法律讲堂</view>
			</view>
			<image :src="topimg" mode=""></image>
		</view>
		<view class="mainpadding">
			<!-- 免费普法 -->
			<view class=" lanbox radius mainpadding">
				<view class="lansetext">免费普法</view>
				<view class="flexleft flex_wrap">
					<view class="ershiw flexcolumn margin_top" v-for="item in mfpf_data" :key="item.id"
						@click="trzxq(item)">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mianfei" v-show="item.is_vip==1">免费观看</view>
						<view class="huiyuan" v-show="item.is_vip==2">会员观看</view>
					</view>
				</view>
			</view>
			<!-- 精品法课 -->
			<view class=" huangsebox radius mainpadding margin_top">
				<view class="lansetext">精品法课</view>
				<view class="flexleft flex_wrap">
					<view class="ershiw flexcolumn margin_top" v-for="item in jpfk_data" :key="item.id"
						@click="trzxq(item)">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mianfei" v-show="item.is_vip==1">免费观看</view>
						<view class="huiyuan" v-show="item.is_vip==2">会员观看</view>
					</view>
				</view>
			</view>
			<!-- 名师说法 -->
			<view class=" lanbox radius mainpadding margin_top">
				<view class="lansetext">名师说法</view>
				<view class="flexleft flex_wrap">
					<view class="ershiw flexcolumn margin_top" v-for="item in mssf_data" :key="item.id"
						@click="trzxq(item)">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mianfei" v-show="item.is_vip==1">免费观看</view>
						<view class="huiyuan" v-show="item.is_vip==2">会员观看</view>
					</view>
				</view>
			</view>
			<!-- 线下讲堂 -->
			<view class="fensebox radius mainpadding margin_top">
				<view class="lansetext">线下讲堂</view>
				<view class="flexleft flex_wrap">
					<view class="ershiw flexcolumn margin_top" v-for="item in xxjt_data" :key="item.id"
						@click="trzxq(item)">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mianfei" v-show="item.is_vip==1">免费观看</view>
						<view class="huiyuan" v-show="item.is_vip==2">会员观看</view>
					</view>
				</view>
			</view>
			<!-- 在线视频 -->
			<!-- <view class="huisebox radius mainpadding margin_top dingwei">
				<view class="lansetext">在线视频</view>
				<video class="video margin_top" src=""></video>
				<view class="huisebtn">会员观看</view>
			</view> -->
		</view>
		<huiyuansjpop :messageInfo="{hysjShow:hysjShow}" @hysjclose="hysjShow=false"></huiyuansjpop>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				topimg: "",
				mfpf_data: [], //免费普法
				jpfk_data: [], //精品法课
				mssf_data: [], //名师说法
				xxjt_data: [], //线下讲堂
				hysjShow:false,
				userinfo:{},
			}
		},
		onShow() {
			this.getbanner() //轮播
			this.getfljt() //法律讲堂
			this.getuserinfo() //法律讲堂
		},
		methods: {
			getuserinfo(){
				httpRequest.request('/api/user/index', 'GET', {}, false, false, true).then(res => {
					this.userinfo = res.data
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 15,
					is_more: 2
				}, false, false, true).then(res => {
					this.topimg = res.data.image_text
				})
			},
			getfljt() {
				httpRequest.request('/api/index/fljtIndex', 'GET', {}, false, false, true).then(res => {
					this.mfpf_data = res.data.mfpf_data //免费普法
					this.jpfk_data = res.data.jpfk_data //精品法课
					this.mssf_data = res.data.mssf_data //名师说法
					this.xxjt_data = res.data.xxjt_data
				})
			},
			// 跳转详情
			trzxq(item) {
				if(this.userinfo.level==0 && item.is_vip==2){
					this.hysjShow = true
					return false
				}
				uni.navigateTo({
					url: '/pages/index/pufajiangtxq?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huisebtn {
		position: absolute;
		bottom: 84rpx;
		z-index: 12;
		left: 281rpx;
		width: 128rpx;
		height: 46rpx;
		background-color: #B3B3B3;
		font-size: 20rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: 400;
		color: #FFFBF1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}

	.video {
		width: 100%;
		height: 310rpx;
	}

	.huisebox {
		background-color: #F2F2F2;
	}

	.fensebox {
		background-color: #FCEDF2;
	}

	.huangsebox {
		background-color: #FCFCF1;
	}

	.shilitu {
		width: 144rpx;
		height: 210rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

		image {
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			width: 100%;
			height: 100%;
		}
	}

	.ershiw {
		width: 25%;
	}

	.lansetext {
		font-size: 31rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: bold;
		color: #2297FE;
	}

	.lanbox {
		background-color: #E8F6FF;
	}

	.banner {
		width: 100%;
		height: 371.4rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>